<template>
  <div class="app-container">

    <header>
      <el-row>
        <el-col :span="12">
          <h3>JsParser——javascript语法树解析工具 powered by <a href="https://github.com/mck89/peast" style="text-decoration:underline;" target="_blank">mck89/peast</a></h3>
        </el-col>
      </el-row>
    </header>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="8">
        <div class="grid-content">
          <el-card shadow="never">
            <div slot="header">
              <span>javascript</span>

              <el-dropdown @command="handleCardCommand" style="float: right; padding: 3px 0">
            <span class="el-dropdown-link">
               <i class="el-icon-more el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="d" >配置卡片</el-dropdown-item>
                  <el-dropdown-item command="e" divided>移除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <i class="el-icon-refresh" style="float: right; padding: 3px 0"></i>
            </div>
            <el-form ref="data_structure_form">

              <el-form-item label="">
                <el-input type="textarea" v-model="jscode" :autosize="{ minRows: 20, maxRows: 100}"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleParser">提交</el-button>
              </el-form-item>
            </el-form>

          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <el-card shadow="never">
            <div slot="header">
              <span>AST</span>

              <el-dropdown @command="handleCardCommand" style="float: right; padding: 3px 0">
            <span class="el-dropdown-link">
               <i class="el-icon-more el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="d" >配置卡片</el-dropdown-item>
                  <el-dropdown-item command="e" divided>移除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

              <i class="el-icon-refresh" style="float: right; padding: 3px 0"></i>
            </div>
            <el-card v-if="result.ast" class="box-card mt30">
              <json-view :data="result.ast" copyable />
            </el-card>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <el-card shadow="never">
            <div slot="header">
              <span>Tokens</span>

              <el-dropdown @command="handleCardCommand" style="float: right; padding: 3px 0">
            <span class="el-dropdown-link">
               <i class="el-icon-more el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="d" >配置卡片</el-dropdown-item>
                  <el-dropdown-item command="e" divided>移除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

              <i class="el-icon-refresh" style="float: right; padding: 3px 0"></i>
            </div>
            <el-card v-if="result.token" class="box-card mt30">
              <json-view :data="result.token" copyable/>
            </el-card>

          </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import jsonView from "vue-json-views";
export default {

  name: 'develop_jsparser',
  components: {
    jsonView
  },
  data() {
    return {
      title: 'jsparser',
      // 预览内容
      result: [],
      jscode:'',
      // rule
      rules: {
      },
    }
  },
  methods: {
    handleCardCommand(command) {
      this.$message('click on item ' + command);
    },
    handleParser() {
          var submitData = {string:this.jscode}
          this.$http.post('develop/jsparser/index', submitData).then(response => {
            this.result = response.data
            if (response.code === 10000) {
              this.$message.success(response.message)
            } else {
              this.$message.error(response.message)
            }
          })
    }
  }
}

</script>
